<template>
	<view>
		<global-contact></global-contact>
		<view class="content">
			<!-- <web-view :src='info.video_url'></web-view> -->
			<view class="title">{{ detail.title }}</view>
			<!-- #ifdef MP-WEIXIN -->
			<txv-video :vid="detail.video_url" playerid="txvl"></txv-video>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<iframe style="width: 100%;" :src="'https://v.qq.com/iframe/player.html?vid=' + detail.video_url"></iframe>
			<!-- #endif -->

			<block v-if="detail">
				<mp-html :content="detail.content" />
			</block>


			<block
				v-if="detail.associated && JSON.stringify(detail.associated) != '[]' && detail.associated.activity && detail.associated.activity.length > 0">
				<view class="aboutVideo">
					<view class="aboutCate">相关活动</view>
					<view class="about_item" v-for="(item, index) in detail.associated.activity" :key="index"
						@click="viewActive(item)">
						<image mode="aspectFill" :src="showImg + item.img"></image>
						<view class="about_txt">{{ item.title }}</view>
					</view>
				</view>
			</block>
			<block
				v-if="detail.associated && JSON.stringify(detail.associated) != '[]' && detail.associated.case && detail.associated.case.length > 0">
				<view class="aboutVideo">
					<view class="aboutCate">相关案例</view>
					<view class="about_item" v-for="(item, index) in detail.associated.case" :key="index"
						@click="viewCase(item)">
						<image mode="aspectFill" :src="showImg + item.img"></image>
						<view class="about_txt">{{ item.title }}</view>
					</view>
				</view>
			</block>
			<!-- <mp-html :content="detail.video_url" /> -->
			<!-- 	<view class="title">坚持两次的考研最终给我带来了什么样的生活改变？</view>
			<view class="time">2022-01-30 20:52</view>
			<view class="contain">
				
				<video :src="src" controls></video> 
				<text>课程背景：</text>
				<text>研究显示，团队绩效的影响因素有五点：</text>
				<text>1. 目标制定的科学性和系统性</text>
				<text>2. 策略制定的科学性</text>
				<text>3. 计划的可操作可衡量标准</text>
				<text>4. 执行是否到位</text>
				<text>5. 过程的监督与跟进 本课程通过剖析剖析影响目标达成的关键因素，了解到组织中沟通不畅、执行无力、绩效不佳的根源，并使受训者掌握目标设定、分解、策略共创以及评估优选，计划执行的方法和工具，优化员工行为，从而提升组织绩效！</text> 
				
			</view> -->
		</view>
	</view>
</template>

<script>
import { showVideo } from '@/utils/request.js'
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
export default {
	data() {
		return {
			// src:'https://v26-web.douyinvod.com/015c54f2951596742480b2c314d67941/61f91a39/video/tos/cn/tos-cn-ve-15-alinc2/b09933815c7f46b3a72599baf384e8b4/?a=6383&br=1877&bt=1877&cd=0%7C0%7C0%7C0&ch=5&cr=0&cs=0&cv=1&dr=0&ds=3&er=&ft=R7GsdRWWFB8kq8bi7nPDT9bqeaQ&l=2022013019312401019404022429DEB2A2&lr=all&mime_type=video_mp4&net=0&pl=0&qs=0&rc=M2h5OTM6ZjZuOjMzNGkzM0ApZDs2ODtmOWRmNzszOjM6PGdeM2tucjRfZm5gLS1kLS9zczUwNi5fMS4wNWE2Xl4zNjM6Yw%3D%3D&vl=&vr='
			info: {
				vid: ''
			},
			detail: '',
			showImg: ''
		}
	},
	components: {
		mpHtml
	},
	methods: {
		async showVideo(data) {
			return await showVideo(data)
		},
		getDetail(data) {
			this.showVideo(data).then(res => {
				console.log('res', res)
				this.detail = res[0]
				uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
					title: this.detail.title // 自定义标题内容
				})
			})
		},
		viewActive(item) {
			uni.navigateTo({
				url: `/pagesA/detail/product?id=${item.id}`
			})
		},
		// 相关案例
		viewCase(item) {
			uni.navigateTo({
				url: `/pagesA/detail/case?id=${item.id}`
			})
		},
	},
	onLoad(option) {
		this.showImg = this.$config.showImgApi;
		let data = {}
		if (option.scene) {
			const detailId = decodeURIComponent(option.scene);
			data = { id: detailId.split('=')[1] }
		} else {
			if (option['id']) {
				data = {
					id: option.id
				}
			} else {
				this.info = JSON.parse(decodeURIComponent(option.params))
				data = {
					id: this.info.id
				}
			}
		}
		// console.log('option',this.info)

		this.getDetail(data)
	},

	onShareAppMessage(res) {
		return {
			title: this.detail.title,
			path: `/pages/videoList/detail?id=${this.info.id}`,
			imageUrl: this.showImg + this.detail.img
		}
	},
	onShareTimeline(res) {
		return {
			title: this.detail.title,
			path: `/pages/videoList/detail?id=${this.info.id}`,
			imageUrl: this.showImg + this.detail.img
		}
	},
}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}

.content {
	padding: 48rpx 30rpx 30rpx;

	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 53rpx;
		color: #1A1A1A;
		margin-bottom: 32rpx;
	}

	.time {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 40rpx;
		color: #888888;
		margin-bottom: 48rpx;
	}

	// 实则 富文本 
	.contain {
		video {
			width: 690rpx;
			height: 380rpx;
			margin-bottom: 30rpx;
		}

		text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44rpx;
			color: #000000;
			display: block;
		}
	}
}

.aboutVideo {
	background-color: #FFFFFF;

	// padding: 0 30rpx;
	.aboutCate {
		font-size: 30rpx;
		text-align: center;
		font-weight: bolder;
		line-height: 70rpx;
	}

	.about_item {
		text-align: center;
		margin-bottom: 20rpx;

		image {
			width: 690rpx;
			height: 440rpx;
		}

		.about_txt {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
			font-size: 34rpx;
			line-height: 60rpx;
		}
	}
}
</style>
